<template>
  <div>
    <el-row style="margin-bottom: 10px;">
      <!--触发添加的弹出框-->
      <el-button type="primary" @click="centerDialogVisible = true">添加类别</el-button>
    </el-row>
    <el-row>
      <el-table
        :data="data" border stripe height="425px">
        <el-table-column type="index" align="center"></el-table-column><!--索引列-->
        <el-table-column label="分类名" prop="name" align="center" sortable/>
        <el-table-column label="操作" align="center" width="400px">
          <template slot-scope="scope">
            <!-- 修改信息 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlerUpdate(scope.row)">修改</el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <el-col :span="24">
        <!--添加-->
        <el-dialog title="添加类别" :visible.sync="centerDialogVisible" width="30%" center>
          <div style="display: flex;justify-content: center;margin-bottom: 10px;">
            <span class="demonstration">类别名称</span>
            <el-input v-model="category.name" style="width: 300px;"></el-input>
          </div>
          <!--添加弹出框-->
          <span slot="footer" class="dialog-footer">
                        <el-button @click="clearDialog">取 消</el-button>
                        <el-button type="primary" @click="saveCategory">确 定</el-button>
                    </span>
        </el-dialog>
      </el-col>

      <el-col :span="24">
        <!--修改-->
        <el-dialog title="修改类别" :visible.sync="centerDialog" width="30%" center>
          <div style="display: flex;justify-content: center;margin-bottom: 10px;">
            <span class="demonstration">类别名称</span>
            <el-input v-model="category.name" style="width: 300px;"></el-input>
          </div>
          <!--添加弹出框-->
          <span slot="footer" class="dialog-footer">
                        <el-button @click="clearDialog">取 消</el-button>
                        <el-button type="primary" @click="updateCategory">确 定</el-button>
                    </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { categories, deleteCategory, saveCategory, updateCategory } from '@/api/categories'

export default {
  name: 'Index',
  data() {
    return {
      category: {
        name: ''
      },
      centerDialogVisible: false,
      centerDialog: false,
      defaultOptions: {
        label: 'name',
        value: 'id',
        checkStrictly: true,
        leaf: 'children',
        disable: 'status'
      },
      data: [],
      // 表格数据
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    // 取消保存
    clearDialog() {
      this.category = {};
      this.centerDialogVisible = false;
      this.centerDialog = false;
    },
    // 保存类别
    saveCategory() {
      if (!this.category.name) {
        this.$message.warning('请输入类别名称!');
        return false;
      }
      saveCategory(this.category).then(res => {
        this.centerDialogVisible = false;
        this.category = {};
        this.categories();
      }).catch(err => err);
    },
    // 获取类别列表
    categories() {
      categories().then(res => {
        this.data = res.data.data;
        this.tableData = res.data.data;
      }).catch(err => err);
    },
    // 修改
    handlerUpdate(data) {
      this.category = data;
      this.centerDialog = true;
    },
    updateCategory() {
      updateCategory(this.category).then(res => {
        this.centerDialog = false;
        this.category = {};
        this.categories();
      }).catch(err => err);
    },
    // 删除类别
    remove(id) {
      deleteCategory(id).then(res => {
        // 刷新数据
        this.categories();
        this.$message.success('删除成功!');
      }).catch(err => err);
    }
  },
  created() {
    this.categories();
  }
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 8px;
}

.demonstration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 25px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
